/**
 * Created by hejg on 2018/5/7.
 */
import React, {Component} from 'react';
import {
    ScrollView,
    View,
    StyleSheet,
    Text,
    TouchableOpacity,
} from 'react-native';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import PowerIcon from 'react-native-vector-icons/Ionicons';
import {withNavigation} from 'react-navigation';
import Style from '../../../../components/Style';
import Tool from '../../../../components/Tool';
import ExaminaIndex_3_City from '../components/ExaminaIndex_3_City';
import Echarts from 'native-echarts';
export default withNavigation(class Examination extends Component {
    constructor(props) {
        super(props);
        this.state = {

        }
    }
    render() {
        const option = {
            grid: {
                top:'0%',
            },
            legend: {
                data: ['综合评估']
            },
            radar: {
                shape: 'circle',
                center: ['50%', '55%'],
                radius: 95,
                splitArea: {
                    areaStyle: {
                        color: ['#d0d0d0',
                            '#ddd', '#e0e0e0',
                            '#eee', '#f0f0f0'],
                        shadowColor: 'rgba(0, 0, 0, 0.3)',
                        shadowBlur: 10
                    }
                },
                name: {
                    textStyle: {
                        color: '#999',
                        //backgroundColor: '#999',
                        fontSize:12,
                        borderRadius: 3,
                        padding: [3, 15]
                    }
                },
                indicator: [
                    { name: '整体收入情况',max:22},
                    { name: '成员格局战', max:22},
                    { name: 'IDC格局战',max:22},
                    { name: 'ICT格局战', max:22},
                    { name: '专线格局战', max:22},
                    { name: '物联网格局战',max:22},
                    { name: '和教育', max:22}
                ]
            },
            series: [{
                name: '',
                type: 'radar',
                // areaStyle: {normal: {}},

                data : [
                    {
                        value : [20,10,12,8,15,10,9],
                        name : '',
                        areaStyle: {
                            normal: {
                                opacity: 0.9,
                                color: 'rgba(175,205,224,1)'
                            }
                        }
                    }
                ]
            }]
        };
        return (
            <View>
                <View style={{backgroundColor:Style.color.white,marginBottom:10}}>
                    <VSItem change={this.props.change}/>
                    <Echarts option={option} height={260} width={Style.css.width}/>
                </View>
                <View>
                    <View style={styles.operateView}>
                        <Text style={styles.operateTitle}>指标对比</Text>
                        <TouchableOpacity
                            onPress={()=>this.props.navigation.navigate('ExaminaIndex_3_City',{headerTitle:'地市对标设置'})}/*this._changeCity('city')}*/>
                        <PowerIcon name={'ios-options-outline'} color={Style.color.black} size={19}/>
                        </TouchableOpacity>
                    </View>
                    <ScrollView style={{backgroundColor:'#d9d9d9',}}>
                        <ListItem/>
                        <ListItem/>
                        <ListItem/>
                    </ScrollView>
                </View>
            </View>
        );
    }
})
class VSItem extends Component{
    render(){
        return(
            <View style={{width:'100%',marginTop:10,flexDirection:'row',paddingLeft:20,paddingRight:20}}>
                <View style={styles.selfCityView}>
                    <Text style={styles.compareText}>成都</Text>
                </View>
                <View style={{width:'33%',alignItems:'center'}}>
                    <Text>VS</Text>
                </View>
                <TouchableOpacity
                    style={styles.compareView}
                    onPress={()=>this.props.change('menu')}>
                    <Text style={[styles.compareText,{paddingLeft: 30,paddingRight: 20,}]}>眉山</Text>
                    <PowerIcon name={'ios-create-outline'} size={23} style={{color:Style.color.gray}}/>
                </TouchableOpacity>
            </View>
        )
    }
}
class ListItem extends Component{
    render(){
        const seriesLabel = {
            normal: {
                show: true,
                textBorderColor: '#333',
                textBorderWidth: 2
            }
        }
        const option = {
            grid: {
                left:'15%',
                top:'10%',
                bottom:'30%',
                right:'15%'
            },
            xAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value}'
                }
            },
            yAxis: {
                type: 'category',
                inverse: true,
                data: ['2018'],

            },
            series: [
                {
                    name: '成都',
                    type: 'bar',
                    label: seriesLabel,
                    data: [165],
                    itemStyle:{
                        normal:{
                            color:'#558ed5'
                        }
                    },
                },
                {
                    name: '眉山',
                    type: 'bar',
                    label: seriesLabel,
                    itemStyle:{
                        normal:{
                            color:'#c0504d'
                        }
                    },
                    data: [220],
                }
            ]
        };
        return(
            <View style={{flex:1,margin:5,paddingLeft:10,
                paddingRight:10,justifyContent:'space-between',}}>
                <Text>通信和通信收入化</Text>
                    <Echarts option={option} height={80} width={Style.css.width}/>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1, backgroundColor: Style.color.screen
    },
    listView: {
        height: Style.css.titleHeight, flexDirection: 'row', marginTop: 10,
    },
    titleView: {
        paddingLeft: 20,
        alignItems: 'center',
        flex: 1,
        height: Style.css.titleHeight,
        flexDirection: 'row',
        backgroundColor: Style.color.white,
        borderBottomWidth:2,
        borderColor:Style.color.gray,
        justifyContent: 'space-around',
    },
    selfCityView:{width:'30%',borderStyle:'dotted',borderBottomWidth:2,borderColor:Style.color.blue,alignItems:'center'},
    compareView:{width:'30%',alignSelf:'flex-end',borderStyle:'dotted',borderBottomWidth:2,borderColor:'#c0504d',flexDirection:'row'},
    compareText:{textAlign:'center',color:Style.color.black,fontSize:Style.fontSize.normal,fontWeight:'bold'},
    operateView:{height:40,justifyContent:'space-between',alignItems:'center',backgroundColor:Style.color.white,flexDirection:'row',paddingLeft:15,paddingRight:15},
    operateTitle:{color:Style.color.black,}
})